class Detail{
    constructor(){
        this.checkLogin();
        this.getData();
        this.changeCartNum();
        
    }
    // 绑定点击事件
    bindEvent(){

        console.log(this);
        this.$('.plus').onclick = this.add.bind(this);
        this.$('.mins').onclick = this.reduce.bind(this);
    } 

     /********实时获取购物车的总数量********/ 
    async changeCartNum(){

        //获取用户id
        let userId = localStorage.getItem('use_id');
        // console.log(userId);

        //携带token
        axios.defaults.headers.common['Authorization'] = localStorage.getItem('token');

        // 发送ajax请求
        let { status, data } = await axios.get('http://localhost:8888/cart/list?id=' + userId);

        // 判断服务器和接口的状态
        if (status == 200 && data.code == 1) {
        // console.log(status, data);

        // 声明变量存放cart_number的和
        let sum = 0;

        // 遍历data.cart，获取cart_number的总和
        data.cart.forEach(ele =>{
           // console.log(ele.cart_number);
           sum += ele.cart_number;
        //    console.log(sum);
        })

        // this.$('.allgoods .num').innerHTML = sum;

        // 把sum设置到当前位置
        this.$('.sui-btn .shopnum').innerHTML = sum;
       }
    }

    /*******验证是否登录********/ 
    checkLogin(){

        // 获取token的值
        let token = localStorage.getItem('token');

        // 若token值为空，则跳转到登陆页面登陆，不为空则跳转到商品列表页面
        if(!token) location.assign('./login.html?returnUrl=./list.html') 
    }

    /*********获取商品数据*********/ 
    async getData(){

        // 获取商品id
        let param = location.search;
        if(param){
            param = Number(param.split('=')[1]);
        } 
        // console.log(param);

        // 携带token值
        axios.defaults.headers.common["Authorization"] =localStorage.getItem("token");

        // 发送ajax请求
        await axios.get('http://localhost:8888/goods/item?id=' +param).then(({data, status})=>{
            console.log(data, status);
            // 声明变量存放代码
            let html ='';
            // 判断服务器和接口的状态
            if(status == 200 && data.code == 1){
                html = `
                
                    <!--放大镜效果-->
                        <!--默认第一个预览-->
                    <div class="box" id="box">
                        <div class="small" id="small" >
                            <img src="${data.info.img_big_logo}" width="350" alt="" />
                            <div class="mask" id="mask"></div>
                        </div>
                        <div class="big" id="big" >
                            <img src="${data.info.img_big_logo}" width="800" alt="" id="img" />
                        </div>
                    </div>
                
                <div class="fr itemInfo-wrap">
                    <div class="sku-name">
                        <h4>${data.info.title}</h4>
                    </div>
                    <div class="summary">
                        <div class="summary-wrap">
                            <div class="fl title"><i>价　　格</i></div>
                            <div class="fl price"><i>¥</i><em>${data.info.current_price}</em> <s>降价通知</s></div>
                            <div class="fr remark"><i>累计评价</i><em>612188</em></div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title"><i>促　　销</i></div>
                            <div class="fl price"><span>加价购</span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，<br/>即可在购物车换购热销商品 <a href="#">详情》</a></div>
                        </div>
                    </div>
                    <div class="support">
                        <div class="summary-wrap">
                            <div class="fl title"><i>支　　持</i></div>
                            <div class="fl fix-width"><em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em></div>
                        </div>
                        <div class="summary-wrap">
                            <div class="fl title"><i>配 送 至</i></div>
                            <div class="fl fix-width"><em class="t-gray">北京海淀区中关<i class="iconfont"></i>有货    支持  99元免运费 |货到付款 |211限时达   </em></div>
                            <div class="fl express"><em class="t-gray">由自营发货，并提供售后服务。11:00前完成下单，预计<strong>今天（08月10日）送达</strong></em></div>
                        </div>
                    </div>
                    <div class="clearfix choose">
                        <div class="summary-wrap">
                            <div class="controls">
                                <input autocomplete="off" type="text" value="1" minnum="1" class="itxt">
                                <a href="#" class="increment plus">+</a>
                                <a href="#" class="increment mins">-</a>
                            </div>
                            <a href="#none" class="sui-btn  btn-danger addshopcar" onclick='Detail.addCart(${data.info.goods_id})'>加入购物车</a>
                        </div>
                    </div>
                </div>`
            }
           
        // console.log(this.$('.product-info'));
        // 把数据渲染到页面上
        this.$('.product-info').innerHTML = html;
        })
        // 放大镜
        // 1、获取节点
        let box = document.querySelector('#box'),
        small = document.querySelector('#small'),
        mask = document.querySelector('#mask'),
        big = document.querySelector('#big'),
        img = document.querySelector('#img');
        // console.log(box,small,img);

        // 2、给small绑定鼠标移入事件
        small.onmouseover = function(){
            // 2-1当鼠标移入时，让节点对象mask和节点对象big出现
            mask.style.display = 'block';
            big.style.display = 'block';
        }

        // 3、给small绑定鼠标移出事件
        small.onmouseout = function(){
            // 3-1当鼠标移出时，让节点对象mask和节点对象big消失
            mask.style.display = 'none';
            big.style.display = 'none';
        }

        // 获取节点对象box的pageX/Y;
        let boxL = box.offsetLeft;
        let boxT = box.offsetTop;
        // console.log(boxL,boxT);

        // 4、给small绑定鼠标移动事件
        small.onmousemove = function(eve){
            // 4-1让小黄块随着鼠标移动

            // 4-1-1计算鼠标的pageX/Y;
            let px = eve.pageX;
            let py = eve.pageY;
            // console.log(px,py);

            // 4-1-2计算小黄块左边的位置
            let tmpX = px - boxL - mask.offsetWidth / 2;
            let tmpY = py - boxT - mask.offsetHeight / 2;
            // console.log(tmpX,tmpY);  

            // 4-1-3获取小黄块在small里的最大top和left
            let maxL = small.offsetWidth - mask.offsetWidth;
            let maxT = small.offsetHeight - mask.offsetHeight;
            // console.log(maxL, maxT); 250

            // 4-1-4判断小黄块是否超越上边界和左边界
            if(tmpX<0) tmpX = 0 +'px';
            if(tmpY<0) tmpY = 0 +'px';
            // console.log(tmpX);
            // console.log(tmpY);

            // 4-1-5判断小黄块是否超越下边界和右边界
            if(tmpX > maxL) tmpX = maxL;
            if(tmpY > maxT) tmpY = maxT;
            // console.log(tmpX, tmpY); 250

            // 4-1-6将鼠标的坐标位置赋给小黄块
            mask.style.left = tmpX + 'px';
            mask.style.top = tmpY + 'px';
            // console.log(mask.style.left);

            // 4-2计算节点对象big的位置

            // 4-2-1计算出节点对象img能移动的最大距离
            let ImgMaxL = big.offsetWidth - img.offsetWidth;
            let ImgMaxT = big.offsetHeight - img.offsetHeight;
            // console.log(ImgMaxL, ImgMaxT);

            // 4-2-2根据公式求出节点对象img的实时位置
            // 小黄块实时位置/小黄块最大值==大图的实时位置/大图移动的最大距离
            let bigImgL = tmpX / maxL * ImgMaxL;
            let bigImgT = tmpY / maxT * ImgMaxT;
            // console.log(bigImgL, bigImgT);
            
            // 4-2-3把节点对象img的实时位置赋值给节点对象img;
            img.style.left = bigImgL + 'px';
            img.style.top = bigImgT + 'px';
        }
        this.bindEvent();
    }


    /*********改变购物车数量********/ 
    //加
    add(){
        console.log(11111);
        let num = this.$('.itxt').value - 0;
       
        num++; 
        // console.log(num);
        this.$('.itxt').value = num;
        console.log(this.$('.itxt').value);
    }
    //减
    reduce(){
        let num = this.$('.itxt').value - 0;
        num--;
        if(num<=0){
            num = 1;
        }
        console.log(num);
        this.$('.itxt').value = num;
        console.log(this.$('.itxt').innerText);
    }

    // 加入购物车
    // static addCart(goods_id){
    //     // 判断是否登录
    //     // 获取token的值
    //     let token = localStorage.getItem('token');

    //     // 若token值为空，则跳转到登陆页面登陆，不为空则跳转到购物车页面
    //     // 获取用户id以及商品id
    //     let userId = localStorage.getItem('use_id');
    //     // let number = document.querySelector('.itxt').
    //     // console.log(number);;
    //     // console.log(userId, goods_id);


    //     // 拼接参数
    //     let param = `id=${userId}&goodsId=${goods_id}`;

    //     // 设置参数格式
    //     axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

    //     // 设置token值
    //     axios.defaults.headers.common['Authorization'] = token;

    //     // 发送ajax请求
    //     axios.post('http://localhost:8888/cart/add',param).then(({data, status}) => {
    //         console.log(data,status);
    //         // 判断是否请求成功
    //         if(status != 200) return ;
    //         // 接口没有请求成功则返回到登录页面重新登录
    //         if(data.code == 0) location.href = './login.html';
    //         // console.log(data.cart.cart_number);
    //         // 提示下一步操作
    //         layer.confirm('是否去购物车结算', {
    //             btn: ['是', '继续买'] //按钮
    //         }, function () {
    //             // 去购物车
    //             location.href = './cart.html';
    //         });
    //     }) 
    // }
    static addCart(goods_id){

        // 判断是否登录
        // 获取token的值
        let token = localStorage.getItem('token');

        // 若token值为空，则跳转到登陆页面登陆，不为空则跳转到购物车页面
        if(!token)  location.assign('./login.html');

        layer.confirm('是否加入购物车？', {
            btn: ['是', '再看看'] //按钮
        }, function (index) {
            layer.close(index)
            // 获取用户id以及商品id
            let userId = localStorage.getItem('use_id');
            console.log(userId, goods_id);

            // 拼接参数
            let param = `id=${userId}&goodsId=${goods_id}`;

            // 设置参数格式
            axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

            // 设置token值
            axios.defaults.headers.common['Authorization'] = token;

            // 发送ajax请求
            axios.post('http://localhost:8888/cart/add',param).then(({data, status}) => {
                // console.log(data,status);
                // 判断是否请求成功
                if(status != 200) return ;
                // 接口没有请求成功则返回到登录页面重新登录
                if(data.code == 0) location.href = './login.html';
            })  
            // 去购物车
            // location.href = './cart.html';
        });
        
        this.changeCartNum(); 
    }

    // 获取父节点下的某个子节点
    getChildren(father, children, attr = "value") {
        // console.log('get',father.querySelector(children)[attr]);
        return father.querySelector(children)[attr];
    }

     // 获取节点
     $(ele){
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }

}
new Detail;